import React, { useEffect } from 'react';
import moment from 'moment';
import { eventTrack } from '@/utils/track';
import { history } from 'umi';
import { List } from 'antd';
import { connect } from 'umi';
import LinkTo from '@/components/LinkTo';
import authHelpr from '@/utils/auth/helper';
import styles from '../../homepage.less';

const { checkCode } = authHelpr;

/**
 * 规则制度
 */
const RuleList = ({ dispatch, rules, institutionType, user, droppableProps }) => {
    const User = user.currentUser; // 登陆人信息
    const { rulesTableList } = rules;
    // console.log(rulesTableList, 'rulesTableList');
    // console.log(institutionType, 'institutionType');

    const getList = () => {
        dispatch({
            type: 'rules/featchList',
            payload: {
                organizationCode: User.companyId,
                institutionType: institutionType === 'all' ? '' : institutionType,
                keyword: '',
                pageNo: 1,
                pageSize: 4
            },
            callback: res => {
                const obj = {
                    list: res.rows,
                    pagination: {
                        pageSize: res.pageSize,
                        current: res.pageNo,
                        total: res.total
                    }
                };
                rulesTableList[institutionType] = obj;
                // dispatch({
                //     type: 'rulesList/save',
                //     payload: {
                //         rulesTableList: { ...rulesTableList }
                //     }
                // }).then(console.log(rulesTableList, 'then'));
            }
        });
    };

    useEffect(() => {
        if (rulesTableList) {
            getList();
        }
    }, [rulesTableList]);

    const renderItem = item => {
        const link =
            item.detailPage !== 1
                ? '/office/institutions/rulesManage/institutionsDetail'
                : '/office/personnelManagement/organization/rank/detail';
        return (
            <List.Item key={item.id.toString()} className={styles.workList}>
                <List.Item.Meta
                    className={styles.workListMeta}
                    title={
                        checkCode('office:institutions:detail') ? (
                            <LinkTo
                                // 埋点
                                onClick={(e, url) => {
                                    const eventMap = {
                                        personnel: 'portal_rules_manage_personnel_info_click',
                                        finance: 'portal_rules_manage_finance_info_click',
                                        brand: 'portal_rules_manage_brand_info_click'
                                    };
                                    eventTrack({
                                        eventName: eventMap[institutionType],
                                        pageName: 'personal_portal',
                                        eventProps: {
                                            click_context: item.institutionName
                                        }
                                    });
                                    history.push(url);
                                }}
                                to={link}
                                query={{
                                    id: item.id
                                }}
                            >
                                {item.institutionName}
                            </LinkTo>
                        ) : (
                            item.institutionName
                        )
                    }
                />
                <div className={styles.wnlist_time}>
                    {droppableProps['data-rbd-droppable-id'] === 'droppable'
                        ? moment(item.publishTime).format('YYYY-MM-DD HH:mm')
                        : moment(item.publishTime).format('YYYY-MM-DD')}
                </div>
            </List.Item>
        );
    };

    return (
        <List
            itemLayout="horizontal"
            dataSource={rulesTableList[institutionType] && rulesTableList[institutionType].list}
            split={false}
            renderItem={renderItem}
        />
    );
};
export default connect(({ loading, user, rules }) => ({
    rules,
    loading,
    user
}))(RuleList);
